<template>
  <view class="content">
    <view class="topBox">
      <!-- <view class="setbox">
        <view class="set-left">
          <uni-icons type="calendar" size="30" color="#fff"></uni-icons>
          <view class="txt" @click="showAd" >签到</view> 
        </view>
        <view class="set-right">
          <uni-icons type="gear" size="30" color="#fff" @click="onClick"></uni-icons>
        <uni-icons type="chat" size="30" color="#fff"></uni-icons> 
        </view>
      </view> -->

      <view class="users">
        <view class="u-top">
			
          <image
            :src="imageUrl+userInfo.portrait"
            mode=""></image>
          <view class="tit">
            {{userInfo.nickName}}
          </view>
        </view>
        <view class="u-bottom">
          
          <view class="u-item">
            <view class="num">{{userAmount.income}}</view>
            <view class="u-tit">收入金币</view>
          </view>
          <view class="u-item">
            <view class="num">{{userAmount.expense}}</view>
            <view class="u-tit">兑换金币</view>
          </view>
        </view>
      </view>
    </view>



    <view class="listBox">
      <view class="lists">
		  
		<uni-section title="快捷入口" type="line" padding >
			<uni-grid :column="3" :highlight="true" @change="change" :showBorder="true">
				<!-- <uni-grid-item v-for="(item, index) in 3" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons type="image" :size="30" color="#777" />
						<text class="text">文本信息</text>
					</view>
				</uni-grid-item> -->
				<!--  #ifdef  APP-PLUS -->
				<uni-grid-item @click="showContentAd()">
					<view class="grid-item-box" >
						<view>
							<image mode="aspectFit" style="width:30px;height:30px;" :src="icons.video"></image>
						</view>
						<view>
							<text class="text">看短视频</text>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item @click="showAd()">
					<view class="grid-item-box" >
						<view>
							<image mode="aspectFit" style="width:30px;height:30px;" :src="icons.ad"></image>
						</view>
						<view>
							<text class="text">赚金币</text>
						</view>
					</view>
				</uni-grid-item>
				<!--  #endif -->
				<uni-grid-item @click="itemClick(2)" >
					<view class="grid-item-box" >
						<view>
							<image mode="aspectFit" style="width:30px;height:30px;" :src="icons.prize"></image>
						</view>
						<view>
							<text class="text" >兑换礼品</text>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item @click="itemClick(15)">
					<view class="grid-item-box" >
						<view>
							<image mode="aspectFit" style="width:30px;height:30px;" :src="icons.history"></image>
						</view>
						<view>
							<text class="text">兑换记录</text>
						</view>
					</view>
				</uni-grid-item>
				
				
				
				<uni-grid-item @click="itemClick(3)">
					<view class="grid-item-box" >
						<view>
							<image mode="aspectFit" style="width:30px;height:30px;" :src="icons.share"></image>
						</view>
						<view>
							<text class="text">发布分享</text>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item @click="itemClick(4)">
					<view class="grid-item-box" >
						<view>
							<image mode="aspectFit" style="width:30px;height:30px;" :src="icons.todo"></image>
						</view>
						<view>
							<text class="text">发布待办</text>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item @click="itemClick(5)">
					<view class="grid-item-box" >
						<view>
							<image mode="aspectFit" style="width:30px;height:30px;" :src="icons.target"></image>
						</view>
						<view>
							<text class="text">发布目标</text>
						</view>
					</view>
				</uni-grid-item>
				
				<uni-grid-item @click="itemClick(16)">
					<view class="grid-item-box" >
						<view>
							<image mode="aspectFit" style="width:30px;height:30px;" :src="icons.table"></image>
						</view>
						<view>
							<text class="text">使用表单</text>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item @click="itemClick(17)">
					<view class="grid-item-box" >
						<view>
							<image mode="aspectFit" style="width:30px;height:30px;" :src="icons.member"></image>
						</view>
						<view>
							<text class="text">新增会员</text>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		
		
	
		
		
		
		
        <!-- <uni-list> -->




		
		<!-- <uni-list-item  title="兑换" note="金币兑换礼品" showArrow
				:thumb="icons.prize"
				thumb-size="medium" rightText=""  clickable @click="itemClick(2)"/>
		<uni-list-item  title="兑换记录" note="兑换记录查看" showArrow
				:thumb="icons.history"
				thumb-size="medium" rightText=""  clickable @click="itemClick(15)"/> -->
		<!-- <uni-list-item title="去发布分享" note="点击去发布分享" showArrow
			:thumb="icons.share"
			thumb-size="medium" rightText=""  clickable @click="itemClick(3)"/>
		<uni-list-item title="去发布待办" note="点击去发布待办" showArrow
			:thumb="icons.todo"
			thumb-size="medium" rightText=""  clickable @click="itemClick(4)"/>
		<uni-list-item title="去发布目标" note="点击去发布目标" showArrow
			:thumb="icons.target"
			thumb-size="medium" rightText=""  clickable @click="itemClick(5)"/> -->
<!-- 		<uni-list-item title="去发布提醒" note="点击去发布提醒(1金币)" showArrow
			thumb="../../static/tubiao4.png"
			thumb-size="lg" rightText=""  clickable @click="itemClick(6)"/>	
        </uni-list> -->
	
		<!-- <uni-list-item title="去看短视频" note="休息娱乐一下" showArrow
			:thumb="icons.video"
			thumb-size="medium" rightText=""  clickable @click="showContentAd()"/>	
			
		<uni-list-item title="去看广告" note="看广告赚金币" showArrow
			:thumb="icons.ad"
			thumb-size="medium" rightText=""  clickable @click="showAd()"/>	
	 -->
		<!-- </uni-list> -->
		
		
		<!-- <uni-list-item  title="10" note="金币兑换现金" showArrow
				thumb="../../static/tubiao5.png"
				thumb-size="lg" rightText=""  clickable @click="itemClick(10)"/>
		<uni-list-item  title="11" note="金币兑换现金" showArrow
				thumb="../../static/tubiao5.png"
				thumb-size="lg" rightText=""  clickable @click="itemClick(11)"/>
		<uni-list-item  title="12" note="金币兑换现金" showArrow
				thumb="../../static/tubiao5.png"
				thumb-size="lg" rightText=""  clickable @click="itemClick(12)"/>
		<uni-list-item  title="13" note="金币兑换现金" showArrow
				thumb="../../static/tubiao5.png"
				thumb-size="lg" rightText=""  clickable @click="itemClick(13)"/>
		<uni-list-item  title="14" note="金币兑换现金" showArrow
				thumb="../../static/tubiao5.png"
				thumb-size="lg" rightText=""  clickable @click="itemClick(14)"/> -->
      </view>
    </view>
	
	<view class="listBox">
	  <view class="lists">
		  
		<uni-section title="设置" type="line" padding >
			<uni-list>
				
				
				
						<uni-list-item title="修改基础信息" note=""  showArrow
						:show-extra-icon="true" :extra-icon="extraIcon1"  clickable @click="setItemClick(1)"/>
						<uni-list-item title="修改密码" note="" showArrow
						:show-extra-icon="true" :extra-icon="extraIcon8"  clickable @click="setItemClick(2)"/>
						
						<uni-list-item title="关于我们" note="" showArrow
							:show-extra-icon="true" :extra-icon="extraIcon3"  clickable @click="setItemClick(7)"/>	
						<uni-list-item title="意见反馈" note="" showArrow
							:show-extra-icon="true" :extra-icon="extraIcon7"  clickable @click="setItemClick(8)"/>	
					
						<uni-list-item title="退出登录" note="" showArrow
						:show-extra-icon="true" :extra-icon="extraIcon2"  clickable @click="setItemClick(5)"/>	
				
					
					</uni-list>
			</uni-section>
	</view>
	</view>		

	 <view style="height:50px;">
		 
	 </view>


 
<!-- 		<uni-fab ref="fab" :pattern="pattern" :content="toolsContent" :horizontal="horizontal" :vertical="vertical"
					:direction="direction" @trigger="trigger"  /> -->
  </view>
  
  
<!--  #ifdef  APP-PLUS -->

  <view>
  <ad-rewarded-video ref="adRewardedVideo2" adpid="1233316808" :url-callback="adUserData" :preload="false" :loadnext="false" :disabled="true"
      v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
      <view class="ad-error" v-if="error">{{error}},{{adUserData.userId}},{{adUserData.extra}}</view>
    </ad-rewarded-video>
  <ad-rewarded-video ref="adRewardedVideo" adpid="1610972564" :url-callback="adUserData" :preload="false" :loadnext="false" :disabled="true"
      v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
      <view class="ad-error" v-if="error">{{error}},{{adUserData.userId}},{{adUserData.extra}}</view>
    </ad-rewarded-video>
  <ad-fullscreen-video ref="adFullscreenVideo" adpid="1006212294" :preload="false" :loadnext="false" :disabled="true"
    v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
    <view class="ad-error" v-if="error">{{error}}</view>
  </ad-fullscreen-video>
  </view>
<!--  #endif -->
 
  
  
  
</template>

<script>
	import constant from '@/store/constant.js'
	
	const baseImageUrl=constant.baseImageUrl;
	var today=constant.today;
	import store from '@/store/index.js';//需要引入store
	export default {
		computed:{
			
			userAmount(){
				return store.state.user.userAmount
			},
			toolsContent(){
				return store.state.common.toolsContent
			},
		
		},
		components: {},
		onLoad() {
		
			
			// uni.startPullDownRefresh();
			let iconsString=uni.getStorageSync("icons");
			this.icons=JSON.parse(iconsString);
			
			
		},
		onReady() {
			
			//#ifdef APP-PLUS
				this.isLoading = true;
				this.$refs.adRewardedVideo.load();
				this.$refs.adRewardedVideo2.load();
				this.$refs.adFullscreenVideo.load();	
			//#endif
		  
		  // this.$refs.adFullscreenVideo.load();
		
		},
		onShow(){
			this.$data.userInfo=JSON.parse(uni.getStorageSync("userInfo"))
			this.adUserData.userId=this.$data.userInfo.userId;
			this.adUserData.extra="1";
			store.dispatch('loadUserAmount',{})
		},
		data() {
			return {
				extraIcon1: {
				 color: '#666666',
				 size: '22',
				 type: 'settings'
			   },
			   extraIcon2: {
				 color: '#666666',
				 size: '22',
				 type: 'arrow-left'
			   },
			   extraIcon3: {
				 color: '#666666',
				 size: '22',
				 type: 'info'
			   },
			   extraIcon4: {
				 color: '#666666',
				 size: '22',
				 type: 'email'
			   },
			   extraIcon5: {
				 color: '#666666',
				 size: '22',
				 type: 'gift'
			   },
				extraIcon6: {
				  color: '#666666',
				  size: '22',
				  type: 'closeempty'
				},
				extraIcon7: {
				  color: '#666666',
				  size: '22',
				  type: 'compose'
				},
				extraIcon8: {
				  color: '#666666',
				  size: '22',
				  type: 'eye-slash'
				},
				
				userInfo:{},
				_rewardedVideoAd:null,
				imageUrl:baseImageUrl,
				dosign:"签到",
				cover: '../../static/pig.png',
				avatar: '../../static/pig.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				isLoading: false,
				loading: false,
				adUserData:{
					userId:"000",
					extra:""
				},
				icons:{},
				
			}
		},
		methods: {
			onadload(e) {
			  this.isLoading = false;
			  console.log('广告数据加载成功');
			},
			onadclose(e) {
				let self=this;
				const detail = e.detail
				// 用户点击了【关闭广告】按钮
				if (detail && detail.isEnded) {
					store.dispatch('addIncomeData',{"userId":self.userInfo.userId,"income":1}).then(() => {
					
						store.dispatch('loadUserAmount',{})
						uni.showToast({
						  title: "金币已增加",
						  icon: "none"
						})
					})
				// 正常播放结束
				console.log("onClose " + detail.isEnded);
				} else {
				// 播放中途退出
				uni.showToast({
				  title: "中途退出金币增加失败",
				  icon: "none"
				})
				console.log("onClose " + detail.isEnded);
				}
			  //this.isLoading = true;
			  //this.$refs.adRewardedVideo.load();
			},
			onaderror(e) {
			  // 广告加载失败
			  console.log(e.detail);
			  this.isLoading = false;
			},
			showAd() {
				if (this.isLoading) {
					uni.showToast({
						title: "内容加载中,请稍后再试",
						icon: "none"
					})
				return
				}
				let todayData =uni.getStorageSync("adDate");
				if(todayData){
					if(todayData.date==today){
						if(todayData.data>15){
							if(todayData.data>30){
								this.$refs.adFullscreenVideo.show();
							}else{
								this.$refs.adRewardedVideo.show();
							}
						}else{
							this.$refs.adRewardedVideo2.show();
						}
						todayData.data+=1;
					}else{
						todayData={"date":today,"data":1};
						this.$refs.adRewardedVideo2.show();
					}
				}else{
					todayData={"date":today,"data":1};
					this.$refs.adRewardedVideo2.show();
				}
				uni.setStorageSync("adDate", todayData);
			  
			},
			showContentAd(){
				this.adOptions = {
					adpid: 1385062416
				}
				plus.ad.showContentPage(this.adOptions, (res) => {
					this.loading = false;
				}, (err) => {
					this.loading = false;
					console.log(err);
				});
			},
			itemClick(type){
				console.log(type)
				let url="";
				switch(type){
					case 1:
						url="/pages/user/ad?userId="+this.userInfo.userId;
						break;
					case 2:
						uni.setStorageSync('income', this.userInfo.income);
						url="/pages/user/prize";
						break;
					case 3:
						url="/pages/share/createShare";
						break;
					case 4:
						url="/pages/todo/createTodo";
						break;
					case 5:
						url="/pages/target/createTarget";
						break;
					case 6:
						url="/pages/alert/createAlert";
						break;
					case 10:
						url="/pages/user/adbanner";
						break;
					case 11:
						url="/pages/user/adcontent";
						break;
					case 12:
						url="/pages/user/addraw";
						break;
					case 13:
						url="/pages/user/adfullscreen";
						break;
					case 14:
						url="/pages/user/adinterstitial";
						break;
					case 15:
						url="/pages/user/historyPrize";
						break;	
						
					case 16:
						url="/pages/template/templateList";
						break;	
					case 17:
						url="/pages/member/createMember";
						break;	
						
				
					
				}
				console.log(url);
				uni.navigateTo({
					url:url
				})
			},
			setItemClick(type){
				let url="";
				switch(type){
					case 1:
						url="/pages/user/setting";
						
						
						break;
					case 2:
						url="/pages/user/settingPwd"
						
						break;
					case 3:
						url="/pages/login/agreement?id=1805793898451169280";
						break;
					case 4:
						url="/pages/login/agreement?id=1805869116850958336";
						break;
					case 5:
						url="/pages/login/login";
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');
						break;
					case 6:
						url="/pages/user/deleteUser?userId="+this.userInfo.userId;
						break;
					case 7:
						url="/pages/user/about";
						break;
					case 8:
						url="/pages/user/feedback";
						break;
					
				}
				uni.navigateTo({
					url:url
				})
			},
			trigger(e) {
				
				this.toolsContent[e.index].active = !e.item.active
				store.dispatch('toolsJump',e.item.value)
			},
			onClick(e) {
				let url="/pages/user/settingList"
				// console.log(JSON.stringify(this.userInfo));
				// let url="/pages/user/setting?userId="+this.userInfo.userId+"&nickName="+this.userInfo.nickName+"&introduction="+this.userInfo.introduction;
				// url+="&pwd="+this.userInfo.pwd;
				// if(this.userInfo.age!=undefined){
				// 	url+="&age="+this.userInfo.age;
				// }
				// if(this.userInfo.sex!=undefined){
				// 	url+="&sex="+this.userInfo.sex;
				// }
				// if(this.userInfo.birthday!=undefined){
				// 	url+="&birthday="+this.userInfo.birthday;
				// }
				// if(this.userInfo.portrait!=undefined){
				// 	url+="&portrait="+this.userInfo.portrait;
				// }
				
				console.log(url);
				uni.navigateTo({
					url:url
				})
			},
			
		}
	}
  // export default {
  //   data() {
  //     return {
  //       extraIcon1: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'auth'
  //       },
  //       extraIcon2: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'cart'
  //       },
  //       extraIcon3: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'chatboxes'
  //       },
  //       extraIcon4: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'email'
  //       },
  //       extraIcon5: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'gift'
  //       },

  //     }
  //   },
  //   methods: {
  //     setFun() {
  //       uni.showToast({
  //         title: "点击设置",
  //         icon: "none"
  //       })
  //     },
  //     clickList() {
  //       uni.showToast({
  //         title: "点击列表",
  //         icon: "none"
  //       })
  //     }
  //   }
  // }
</script>

<style scoped>
	.ad-error{
		display: none;
	}
  .content {
    background-color: #f5f5f5;
    height: 100vh;
  }

  /* 弧形背景 */
  .topBox {
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 10rpx 20rpx 20rpx;
    box-sizing: border-box;
  }

  .topBox::after {
    content: "";
    width: 140%;
    height: 200px;
    position: absolute;
    left: -20%;
    top: 0;
    z-index: -1;
    border-radius: 0 0 50% 50%;
    background: #00aaff;
  }

  /* 弧形背景 */
  
  .setbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .set-left {
    width: 18%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .txt {
    color: #fff;
    font-size: 30rpx;
  }

  .set-right .uni-icons {
    margin-right: 10rpx;
  }

  .users {
    margin-top: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    height: 280rpx;
    background-color: #fff;
    box-shadow: 1px 10rpx 20rpx #ececec;
    border-radius: 12rpx;
  }

  .u-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30rpx;
  }

  .users .u-top image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .u-top .tit {
    font-size: 30rpx;
    font-weight: 700;
    color: #333;
  }

  .u-bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .u-item {
    text-align: center;
  }

  .u-item .u-tit {
    color: #757575;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .u-item .num {
    color: #000000;
    font-size: 33rpx;
    font-weight: 700;
  }

  .bottomBox {
    padding: 20rpx;
    box-sizing: border-box;
  }

  .order-list {
    height: 200rpx;
    margin: -15rpx auto 0;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .o-item {
    width: 25%;
    text-align: center;
  }

  .o-item image {
    width: 65rpx;
    height: 55rpx;
  }

  .o-item .tit {
    font-size: 28rpx;
    margin-top: 10rpx;
  }

  .listBox {
    
    margin: -10rpx auto 0;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
  }
  /*------*/
  
  
  	.image {
  		width: 25px;
  		height: 25px;
  	}
  
  	.text {
  		font-size: 14px;
  		margin-top: 5px;
  	}
  
  	
  
  	.grid-dynamic-box {
  		margin-bottom: 15px;
  	}
  
  	.grid-item-box {
  		flex: 1;
  		
  		/* #ifndef APP-NVUE */
  		display: flex;
  		/* #endif */
  		flex-direction: column;
  		align-items: center;
  		justify-content: center;
  		padding: 15px 0;
  	}
  
  	.grid-item-box-row {
  		flex: 1;
  		
  		/* #ifndef APP-NVUE */
  		display: flex;
  		/* #endif */
  		flex-direction: row;
  		align-items: center;
  		justify-content: center;
  		padding: 15px 0;
  	}
  
  	.grid-dot {
  		position: absolute;
  		top: 5px;
  		right: 15px;
  	}
  
  	.swiper {
  		height: 420px;
  	}
  
  	/* #ifdef H5 */
  	@media screen and (min-width: 768px) and (max-width: 1425px) {
  		.swiper {
  			height: 630px;
  		}
  	}
  
  	@media screen and (min-width: 1425px) {
  		.swiper {
  			height: 830px;
  		}
  	}
  
  	/* #endif */
  
</style>